import { useId } from "react";
import { cn } from "@/common/cn";
import Radio, { type RadioStatus } from "./Radio";

export type RadioOption = {
  label: React.ReactNode;
  value: string;
};

export type RadioProps = Omit<
  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
  "onChange"
> & {
  options: RadioOption[];
  value?: string | undefined;
  status?: RadioStatus | undefined;
  size?: Size | undefined;
  onChange?: (value: string | undefined) => void;
};

export default function RadioGroup({
  options,
  value,
  status,
  size,
  onChange,
  className,
  ...p
}: RadioProps) {
  const name = useId();
  return (
    <div className={cn("flex items-center", className)} {...p}>
      {options.map((option) => {
        const id = `radio-${name}-${option.value}`;
        return (
          <>
            <Radio
              key={option.value}
              value={option.value}
              checked={option.value === value}
              status={status}
              size={size}
              id={id}
              onChange={(c) => onChange?.(c ? option.value : undefined)}
            />
            <label htmlFor={id} className="ml-2 mr-4">
              {option.label}
            </label>
          </>
        );
      })}
    </div>
  );
}
